import React, { createRef, useState, useEffect } from 'react'
import { Layout, Modal, Form, Input, Button, message, Radio, Upload } from 'antd'
import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons';

import Menu from '../component/Menu'
import api from '@/api'
import type { RadioChangeEvent } from 'antd';
import { Outlet, useNavigate } from 'react-router-dom'
import { useAppDispatch, useAppSelector } from '@/store/hooks'
import { setState } from '@/store/modules/user'
import './Home.css'
const { Header, Footer, Sider, Content } = Layout;
export default function Home() {
    const dispatch = useAppDispatch()
    const [value, setValue] = useState(1);
    const [avatar, setAvatar]: any = useState('')
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    let nav = useNavigate()
    const userIfo: any = useAppSelector((state) => {
        console.log('888', state.user.userIfo);

        return state.user.userIfo
    })
    let motai1: any = createRef()

    function outLogin() {
        localStorage.clear()
        nav('/login')

    }
    const radioChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    async function submitMsg(args: any) {
        console.log('eeee', args, value);
        let id = Number(localStorage.getItem('id'))
        dispatch(setState(avatar))
        const res = await api.user.updateUser({ ...args, gender: value, id, avatar })

        message.success(res.data.msg)
        console.log(args);
    }

    async function filechange(args: any) {

        if (args.file.status == 'done') {
            console.log('eeeeee', args.file.response.url);
            setAvatar(args.file.response.url)
        }


    }



    return (
        <div>
            <Layout style={{ backgroundColor: '#f5f5f5', height: '100vh', boxSizing: 'border-box' }}>
                <Sider style={{ backgroundColor: '#fff' }} width={255}>
                    <div><img src={require("../assest/img/mlogo.png")} alt="" style={{ width: '90%', margin: '20px auto 0' }} /></div>
                    <Menu ></Menu>
                </Sider>
                <Layout style={{ marginLeft: '30px' }}>
                    <Header style={{ backgroundColor: '#fff', marginBottom: '10px', display: 'flex', justifyContent: 'right', alignItems: "center", position: 'relative' }} >
                        <div className='DWXhomeAvartarhover'>
                            <img src={userIfo ? userIfo : require('../assest/moren.jpg')} style={{ width: '50px', height: '50px', borderRadius: '50%' }} ></img>
                            <div ref={motai1}>
                                <div style={{
                                    display: 'flex', flexDirection: 'column', alignItems: 'center',
                                    width: '100px', height: '200px', backgroundColor: 'white', border: '1px Solid #ccc', position: 'absolute', top: '50px', right: '20px',
                                    borderRadius: '10px', zIndex: '9999'
                                }}>
                                    <p style={{ cursor: 'pointer', height: '30px' }} onClick={showModal}>修改个人信息</p>
                                    <p style={{ cursor: 'pointer', height: '30px' }} onClick={outLogin}>退出登录</p>
                                </div>
                            </div>
                        </div>

                        <Modal title="修改信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                            <Form onFinish={submitMsg} >
                                <Form.Item label='昵称' name='nickname'>
                                    <Input></Input>
                                </Form.Item>
                                <Form.Item label='电话' name='phone'>
                                    <Input></Input>
                                </Form.Item>
                                <Form.Item >
                                    <Radio.Group value={value} onChange={radioChange}>
                                        <Radio value="1" > 男 </Radio>
                                        <Radio value="0" > 女 </Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item>
                                    <Upload action="http://localhost:3005/api/upload" listType="picture-card" maxCount={1} name='file' onChange={filechange} >
                                        <div>
                                            <PlusOutlined />
                                            <div style={{ marginTop: 8 }}>Upload</div>
                                        </div>
                                    </Upload>
                                </Form.Item>
                                <Form.Item >
                                    <Button type="primary" htmlType="submit">
                                        修改
                                    </Button>
                                </Form.Item>


                            </Form>
                        </Modal>

                    </Header>
                    <Header style={{ backgroundColor: '#f5f5f5', marginBottom: '10px' }}>Header</Header>
                    <Content style={{ backgroundColor: '#fff', minHeight: '700px' }}><Outlet></Outlet></Content>
                    <Footer style={{ backgroundColor: '#fff', marginTop: '10px', textAlign: 'center', fontSize: '16px', color: '#aaa' }} >西安bdw家政服务后台管理系统</Footer>
                </Layout>
            </Layout>

        </div >
    )
}
